
import { Button, Layout, Menu, theme } from 'antd';
import React, { useState  } from 'react'
import Menuconfig from '../../config'
import *as Icon from '@ant-design/icons';
import { useNavigate } from 'react-router-dom'
import { selectMenuList} from '../../store/reducers/tab'
import{ useDispatch} from 'react-redux'
const { Header, Sider, Content } = Layout;

//动态获取icon 
const iconToElement = (name) => React.createElement(Icon[name])
//处理菜单的数据
const Menuitems = Menuconfig.map((icon) => {
    //没有子菜单
    const child = {
        key: icon.path,
        icon: iconToElement(icon.icon),
        label: icon.label
    }
    if (icon.children) {
        child.children = icon.children.map(item2 => {
            return {
                key: item2.path,
                label: item2.label,
                icon: iconToElement(item2.icon)
            }
        })
    }
    return child
})
const CommonAside = ({ collapsed }) => {
    const navigate = useNavigate();
    const dispathch = useDispatch()
    const setTabsList = (val) => {
        dispathch(selectMenuList(val))
    }
    const selectMenu = (e) => {
        let data;
        Menuconfig.forEach(item => {
            if (item.path === e.keyPath[e.keyPath.length - 1]) {
                data = item;
                if (e.keyPath.length > 1) {
                    data = item.children.find(child => {
                        return child.path == e.key
                    })
                }
            }
        })

        setTabsList({
            path: data.path,
            name: data.name,
            label:data.label
        })
        navigate(e.key)
    }

    return (
        <Sider trigger={null} collapsed={collapsed} >
            <h3 className="app-name">{collapsed ? '通用' : '通用后台管理系统'}</h3>
            <Menu
                theme="dark"
                mode="inline"
                style={{
                    height: '100%'
                }}
                defaultSelectedKeys={['1']}
                items={Menuitems}
                onClick={selectMenu}
            />
        </Sider>
    )
}
export default CommonAside